<template>
  <div class="container">
    <div class="logo">
      <image mode="aspectFill" :src="shop.logo || shopLogo" alt=""></image>
    </div>

    <div class="welcome">欢迎来到{{ shop.name || "" }}</div>

    <div class="login-wrap">
      <div class="item hairline--bottom">
        <div class="flex align-center">
          <div class="iconfont icon-wzhanghao"></div>
          <input type="text" placeholder="输入账号" v-model="model.username" />
        </div>
        <div class="err" v-if="errorMsg[0]">
          {{ errorMsg[0] }}
        </div>
      </div>

      <div class="item hairline--bottom">
        <div class="flex align-center">
          <div class="iconfont icon-wmima"></div>
          <input
            type="password"
            placeholder="输入密码"
            v-model="model.password"
          />
        </div>
      </div>
    </div>

    <div class="btn-wrap">
      <button class="btn" lang="zh_CN" @click="fnLogin">登录</button>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
import { mediaImage } from "@/utils/source";
// import Router from "@/router";

const { mapActions, mapState } = createNamespacedHelpers("account");

export default {
  computed: {
    ...mapState(["shop","sessionId"]),
  },
  data() {
    return {
      model: {
        username: "",
        password: "",
      },
      errorMsg: [],
      shopLogo: mediaImage("/static/images/logo-default.png"),
    };
  },
  created() {
    if (!this.sessionId) {
      // 获取sessionid
      this.getSessionId();
    }
  },
  methods: {
    ...mapActions(["getSessionId"]),
    fnLogin(){
      uni.switchTab({
        url: "/pages/approval/home/index",
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80rpx;
  overflow: hidden;
  .logo {
    display: flex;
    image {
      width: 132rpx;
      height: 132rpx;
      border-radius: 50%;
    }
  }
  .welcome {
    @include font-24-34-bold;
    margin-top: 48rpx;
    color: $color-w1;
  }
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    padding: 0 64rpx;
    .item {
      position: relative;
      padding-top: 100rpx;
      padding-bottom: 32rpx;
      color: $color-w1;
      &.smsCode {
        .flex {
          input {
            padding-right: 240rpx;
          }
        }
      }
      .flex {
        height: 24rpx;
        .iconfont {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          &.icon-wzhanghao,
          &.icon-wmima,
          &.icon-wshouji,
          &.icon-wduanxin {
            font-size: 40rpx;
            width: 40rpx;
            height: 40rpx;
            margin-right: 16rpx;
          }
          &.icon-wx-circle {
            font-size: 28rpx;
            height: 48rpx;
            width: 48rpx;
            margin-left: 8rpx;
            display: none;
            &.show {
              display: flex;
            }
          }
        }
        input {
          flex: 1;
          font-size: 32rpx;
        }
        .btn {
          @include font-16-22;
          position: absolute;
          right: 0;
          bottom: 14rpx;
          border: 2rpx solid $color-primary;
          width: 216rpx;
          height: 80rpx;
          border-radius: 40rpx;
          color: $color-primary;
          display: flex;
          align-items: center;
          justify-content: center;
          &.disabled {
            color: $color-w4;
            border: 2rpx solid $color-w4;
          }
        }
      }
      .err {
        @include font-12-16;
        position: absolute;
        left: 0;
        bottom: -48rpx;
        color: $color-danger;
      }
    }
  }
  .btn-wrap {
    width: calc(100% - 128rpx);
    margin-top: 64rpx;
    .btn {
      @include font-16-22;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      border-radius: 40rpx;
      background-color: #fff;
      color: $color-w1;
      border: 1px solid $color-line;
      &::after {
        display: none;
      }
      &:first-child {
        background-color: $color-primary;
        color: #fff;
        margin-bottom: 32rpx;
        border: 1px solid $color-primary;
      }
    }
  }
}
</style>
